<template>
  <!-- <el-dialog
    v-model="dialogVisible"
    @open="onOpen"
    @close="close"
    title="阶段详情"
    height="300px"
    class="task-detail-dialog"
  > -->
  <div class="task-detail">
    <!-- <el-row>
      <el-col :span="24" class="list-title">任务名称</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">{{ taskInfo.missionName }}</el-col>
    </el-row> -->
    <el-row>
      <el-col :span="24" class="list-title">任务介绍</el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div v-html="taskInfo.description" class="ql-editor"></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="list-title">任务清单</el-col>
    </el-row>
    <el-table  :data="taskInfo.checkLists">
      <el-table-column
        label="任务描述"
        align="center"
        prop="content"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="成果附件"
        align="center"
        prop="infomation"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <span>{{ scope.row.isSubmit? scope.row.information.name:''}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="截止时间"
        align="center"
        prop="endTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="上传时间"
        align="center"
        prop="submitTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <template v-if="scope.row.isSubmit">
            <el-button
              link
              type="primary"
              icon="Download"
              @click="download(scope.row.information)"
              >下载</el-button
            >
            <el-button
              link
              type="primary"
              icon="Reading"
              @click="preview(scope.row.information)"
              >预览</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row.information.id)"
              >删除</el-button
            >
          </template>
          <template v-else>
            <el-upload
              ref="fileListUpload"
              v-model:file-list="scope.row.fileList"
              :action="fileListAction"
              multiple
              :headers="headers"
              :on-success="
                (response, file, file_list) => {
                  return handleUploadSuccess(response, scope.row);
                }
              "
              :on-error="handleUploadError"
            >
              <el-button size="small" type="primary">+点击上传</el-button>
            </el-upload>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24" class="list-title">学习资料</el-col>
    </el-row>
    <el-row
      v-for="(item, index) in taskInfo.informations"
      :key="'infomation' + index"
      class="information-list"
    >
      <el-col :span="18">{{ item.name }}</el-col>
      <el-col :span="3" @click="download(item)"><a>下载</a></el-col>
      <el-col :span="3" @click="preview(item)"><a>在线预览</a></el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="list-title">软件工具</el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
        ><div v-html="taskInfo.tools" class="ql-editor"></div
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="list-title">任务标签</el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-tag
          v-for="(item, index) in taskInfo.labelList"
          :key="'label' + index"
          :disable-transitions="false"
          style="margin: 0 10px"
        >
          {{ item.dictValue }}
        </el-tag>
      </el-col>
    </el-row>
  </div>
  <!-- </el-dialog> -->
  <PreviewDialog v-model="dialogVisible" :infor="currentInfor"></PreviewDialog>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getTaskInfo, saveResult} from "@/api/home/home";
import {delResult } from "@/api/pms/project";
import PreviewDialog from "./previewDialog.vue";
const headers = ref({
  Authorization: "Bearer " + getToken(),
});
const fileListAction = ref(import.meta.env.VITE_APP_BASEURL + "/common/upload");
const fileList = ref([]);
const { proxy } = getCurrentInstance();
// 弹窗设置
const dialogVisible = defineModel();
const props = defineProps({
  taskId: {
    type: String,
  },
});
const taskInfo = ref({});
const currentInfor = ref({});
/** 查询任务详情 */
function getList() {
  getTaskInfo({ id: props.taskId }).then((response) => {
    taskInfo.value = response.data;
  });
}

/** 下载文件 */
function download(item) {
  proxy.download(
    "/common/download",
    {
      fileName: item.url.replace("/profile/upload", ""),
      delete: false,
    },
    item.name
  );
}
// 上传成果
function handleUploadSuccess(res, row) {
  if (res.code == 200) {
    let params = {
      name: res.name,
      url: res.url,
      missionId: props.taskId,
      proId: taskInfo.value.stageId,
      stageId: row.id,
    };
    saveResult(params).then((response) => {
      proxy.$modal.msgSuccess("提交成功");
      row.fileList= []
      getList();
    });
  } else {
    proxy.$modal.msgError(res.msg);
    row.fileList = []
  }
}

/** 删除按钮操作 */
function handleDelete(id) {
  const resultId = [id];
  proxy.$modal
    .confirm("是否确认删除")
    .then(function () {
      return delResult(resultId);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

const emit = defineEmits(["back"]);
function goBack() {
  emit("back");
}

function close() {
  dialogVisible.value = false;
  taskInfo.value = {};
}
function onOpen() {
  getList();
}
//打开在线预览弹窗
function preview(item) {
  currentInfor.value = item;
  dialogVisible.value = true;
}
// 上传失败处理
function handleUploadError() {
  fileList.value = []
}
onMounted(() => {
  // getList();
});
watch(
  () => props.taskId,
  (newId, oldId) => {
    if (newId) {
      getList();
    }
  },
  { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.task-detail {
  .el-col {
    padding: 10px 30px;
  }
  .list-title {
    margin: 20px 0;
    background: rgba(64, 158, 255, 0.2);
    padding: 10px 30px;
    border-radius: 100px;
    font-weight: bold;
  }
  .check-list {
    .el-col {
      margin: 10px 0;
    }
    .end-time {
      background: rgba(214, 214, 214, 0.2);
      padding: 10px 30px;
      border-radius: 100px;
      text-align: center;
    }
  }
}
</style>
<style lang="scss" scoped>
.information-list {
  a {
    &:hover {
      color: #3eb8ff;
    }
  }
}
</style>